<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑稽的冒险</title>
	<style>
.monster{position:absolute;width:60px;height:60px;}
	</style>
	<script>
//存储所有怪物
var aMonster = [];
//存放亚瑟
var oYase;
//加载
onload = function() {

	//创建亚瑟
	createYase();
	//创建怪物
	createMonster();
	
}


//--------------------------------------------怪物--------------------------------
//创建怪物
function createMonster() {
	//创建元素
	oMonster = document.createElement('img');
	aMonster.push(oMonster);
	//追加给body
	document.body.appendChild(oMonster);
	//附加属性
	oMonster.src = 'huaji.gif';
	oMonster.className = 'monster';

	oMonster.style.top = getRandom(0,window.innerWidth - oMonster.offsetHeight) + 'px';
	oMonster.style.left = getRandom(0,window.innerHeight - oMonster.offsetWidth) + 'px';

	//使怪物移动
	moveMonster(oMonster);

}

//怪物移动
function moveMonster(obj) {
	//设定速度
	obj.speedX = 5;
	obj.speedY = 0;
	obj.timeid = setInterval(function(){
			
			//随机改变方向
			if(!getRandom(0,8)) {
				obj.speedY = 0;
				obj.speedX = 0;
				if(getRandom(0,1)) {
					obj.speedY = (getRandom(0,1) ? 5 : -5);
				} else {
					obj.speedX = (getRandom(0,1) ? 5 : -5);
				}
			}
			//移动
			var y = parseInt(obj.style.top);
			var x = parseInt(obj.style.left);
			y += obj.speedY;
			x += obj.speedX;
			if(y <= 0) {
				y = 0;
				obj.speedY = -obj.speedY;
			} else if(y >= window.innerHeight - obj.offsetHeight) {
				y = window.innerHeight - obj.offsetHeight;
				obj.speedY = -obj.speedY;
			}
			if(x <= 0) {
				x = 0;
				obj.speedX = -obj.speedX;
			} else if(x >= window.innerWidth-obj.offsetWidth) {
				x = window.innerWidth-obj.offsetWidth;
				obj.speedX = -obj.speedX;
			}
			obj.style.top = y + 'px';
			obj.style.left = x + 'px';
			
										},100);
}

//------------------------------------------亚瑟---------------------------------
function createYase() {
	//创建亚瑟
	oYase = document.createElement('img');
	//附加属性
	oYase.status1 = 'ren_q_1.gif';
	oYase.status2 = 'ren_q_2.gif';
	oYase.src = 'img/ren_q_1.gif';
	oYase.position = 'absolute';
	oYase.top = '0px';
	oYase.left = '0px';
	//追加给body
	document.body.appendChild(oYase);
	//移动亚瑟
	onkeydown = function(e) {
		ev = e || event;
		//切换状态
		checkStatus(oYase,ev.keyCode);
		//移动
		moveYase(oYase,ev.keyCode);
	}
	

}
//移动亚瑟
function moveYase(obj,code) {
	

	//移动
	obj.timeId2 = setInterval(function(){
		var y = parseInt(obj.style.top);
		var x = parseInt(obj.style.left);
		y += obj.speedY;
		x += obj.speedX;
		if (x <= 0) {
			obj.speedX = 0;
			x = 0;
		} else if(x >= window.innerWidth - obj.offsetWidth) {
			obj.speedX = 0;
			x = window.innerWidth - obj.offsetWidth;
		}
		if (y <= 0) {
			obj.speedY = 0;
			y = 0;
		} else if(y >= window.innerHeight - obj.offsetHeight) {
			speedY = 0;
			y = window.innerHeight - obj.offsetHeight;
		}
		obj.style.left = x + 'px';
		obj.style.top = y + 'px';
									},100);
}
//根据按键切换状态
function checkStatus(obj,code) {

	switch (parseInt(code)) {
		case 87:	//W
			obj.status1 = 'ren_h_1.gif';
			obj.status2 = 'ren_h_2.gif';
			obj.speedX = 0;
			obj.speedY = -5;
			break;
		case 65:	//A
			obj.status1 = 'ren_l_1.gif';
			obj.status2 = 'ren_l_2.gif';
			obj.speedX = -5;
			obj.speedY = 0;
			break;
		case 83:	//S
			obj.status1 = 'ren_q_1.gif';
			obj.status2 = 'ren_q_2.gif';
			obj.speedX = 0;
			obj.speedY = 5;
			break;
		case 68:	//D
			obj.status1 = 'ren_r_1.gif';
			obj.status2 = 'ren_r_2.gif';
			obj.speedX = 5;
			obj.speedY = 0;
			break;
		case 32:	//space
			
			break;
		case 13: 	//enter
			
			break;
	}

	obj.count = 0;
	if (obj.timeId1) {
		return true;
	}
	obj.timeId1 = setInterval(function(){
		if(obj.count%2==0) {
			obj.src = 'img/' + obj.status2;
		} else {
			obj.src = 'img/' + obj.status1;
		}
		obj.count++;
									},300);
}



//------------------------------------------公共---------------------------------
//获得样式
function getStyle(obj,attr) {
	if (typeof(obj.currentStyle) == 'undefined') {
		return getComputedStyle(obj,null)[attr]
	}
	return obj.currentStyle[attr];
}
//获得随机数
function getRandom(min,max) {
	return Math.round((max-min)*Math.random())+min;
}


	</script>
</head>
<body>
	
</body>
</html>